<template>
	<!-- canvas 可撤回 可恢复 可更换颜色 增减线条大小 -->
	<view class="canvasPoint">
		<canvas
			class="handWriting"
			:disable-scroll="true"
			@touchstart="uploadScaleStart"
			@touchmove="uploadScaleMove"
			@touchend="uploadScaleEnd"
			canvas-id="handWriting"
		></canvas>
		<button type="default" @click="action = action == 'ygpen' ? 'pen' : 'ygpen'">荧光</button>
		<button @click="backCanvas" class="backBtn">回退</button>
		<button @click="nextCanvas" class="backBtn">恢复</button>
		<button @click="lineColor='black'">黑</button>
		<button @click="lineColor='green'">绿</button>
		<button @click="lineColor='blue'">蓝</button>
		<button @click="lineColor='red'">红</button>
		<button @click="lineSize+=6">加</button>
		<button @click="lineSize-=6">减</button>
		<!-- <button @click="isShadow = !isShadow">荧</button> -->
	</view>
</template>

<script>
	export default{
		name: 'canvasPoint',
		data () {
			return {
				ctx: null,					// canvas操作实例
				lineColor: 'black',			// 画笔颜色
				lineSize: 2,				// 画笔大小
				lineHistory: [],			// 画笔历史路径
				historyPointer: -1,			// 记录回退按钮
				lineNow: [],				// 画笔当前路径
				action: 'pen',				// pen 铅笔 ygpen 荧光笔 text 文字 rubber 橡皮擦
				move: [],					// 文字拖动位置
			}
		},
		onReady() {
			let ctx = uni.createCanvasContext('handWriting', this);
			this.ctx = ctx;
		},
		watch:{
			historyPointer(){
				console.log(this.historyPointer,this.lineHistory.length,'watchwatchwatchwatchwatch')
				// console.log(this.lineHistory.length,'this.lineHistory.lengththis.lineHistory.lengththis.lineHistory.length')
				// console.log(this.lineHistory)
			}
		},
		methods: {
			// 回退
			backCanvas(){
				if(this.historyPointer == -1){
					return
				}
				this.historyPointer -= 1
				this.reDraw()
			},
			nextCanvas(){
				if(this.historyPointer == this.lineHistory.length - 1){return}
				this.historyPointer += 1
				this.reDraw()
			},
			reDraw(){
				const {ctx} = this
				
				// 清除画布
				ctx.clearRect(0, 0, 99999, 99999)
				ctx.draw(true)
				
				// 循环历史笔迹
				for(let i = 0; i <= this.historyPointer; i++){
					this.pointLine(this.lineHistory[i])
				}
				
			},
			
			
			// 画笔开始
			uploadScaleStart(e){
				
				this.lineNow = []
				
				const {ctx} = this
				
				// 第一位是起始点
				this.lineNow.push({
					lineX: e.touches[0].x,
					lineY: e.touches[0].y,
					color: this.lineColor,
					lineSize: this.lineSize,
					action: this.action
				})
				this.pointLine(this.lineNow)
				
				// ctx.beginPath()
				// ctx.moveTo(this.lineNow[0].lineX, this.lineNow[0].lineY);
				
			},
			// 画笔移动
			uploadScaleMove(e){
				const { ctx } = this
				
				this.lineNow.push({
					lineX: e.touches[0].x,
					lineY: e.touches[0].y
				})
				this.pointLine(this.lineNow)

			},
			// 画笔结束
			uploadScaleEnd(e){
				
				if(this.historyPointer < this.lineHistory.length-1){
					let tempFlag = this.lineHistory.length - this.historyPointer
					for(let i = tempFlag - 1; i; i-- ){
						this.lineHistory.pop()
					}
				}
				this.historyPointer++
				this.lineHistory.push(this.lineNow)
				
			},
			// 画线条
			pointLine(lineNow, x, y, type){
				const { ctx } = this
				
				// 笔迹起点
				ctx.beginPath()
				// moveto 将坐标移到xy轴
				ctx.moveTo(lineNow[0].lineX, lineNow[0].lineY);
				console.log(lineNow[0])
				ctx.setLineWidth(lineNow[0].lineSize)
				ctx.setFillStyle(lineNow[0].color);
				ctx.setStrokeStyle(lineNow[0].color)
				if(lineNow[0].action == 'ygpen'){
					ctx.setShadow(5, 5, 20, lineNow[0].color)
					ctx.setGlobalAlpha(0.1)
				}
				
				// 循环坐标
				lineNow.forEach((im, ix) => {
					this.ctx.lineTo(im.lineX, im.lineY)
					this.ctx.stroke()
				})
				this.ctx.draw(true)
				
				this.$forceUpdate()
			}
		}
	}
</script>

<style>
	.handWriting{
		width: 100%;
		height: 500rpx;
		border: 1rpx solid #007AFF;
	}
</style>
